<script setup>
import { computed } from "vue";
import { useLayoutThemeStore } from "@/store/layout/layoutTheme.js";
import LayoutSetting from "@/layouts/components/setting/LayoutSetting.vue";
import SignInFormType from "@/views/login/SignInFormType.vue";
import SiginDeveloperView from "@/views/login/SiginDeveloperView.vue";
import { useRouter } from "vue-router";

const layoutSetting = useLayoutThemeStore().layoutSetting;
const showSetting = computed(() => layoutSetting.showSetting);
const algorithm = computed(() => layoutSetting.algorithm);
// const title = computed(() => layoutSetting.title)
// console.log('title: ', title);

const bodyStyle = computed(() => ({
  width: "100%",
  height: "100%",
  backgroundColor: algorithm.value === "darkAlgorithm" ? "#001529" : "",
  position: "relative",
}));

const router = useRouter();
const hasType = computed(() => router.currentRoute.value.query.type);
</script>

<template>
  <a-card class="w100vw h100vh login_contain" :bodyStyle="bodyStyle">
    <div class="box_title">
      <h1 class="text-center" style="font-weight: bold; color: #ffffff">
        {{
          hasType == "selectType"
            ? "选择开发者类型"
            : hasType == "firm"
            ? "企业开发者"
            : "个人开发者"
        }}
      </h1>
      <h2 class="text-center" style="color: #ffffff">人工审核（5个工作日内）</h2>
    </div>
    <a-card
      class="pos-fixed right--1 top-100 z-999"
      :bodyStyle="{ padding: '10px' }"
      v-if="showSetting"
    >
      <LayoutSetting />
    </a-card>
    <a-card
      v-if="hasType == 'selectType'"
      class="pos-absolute w1440px h750px login_card z-10"
      :style="{
        top: 'calc(50% - 430px)',
        left: 'calc(50% - 720px)',
        padding: '180px',
      }"
    >
      <SignInFormType />
    </a-card>
    <a-card
      v-else
      class="pos-absolute w1440px h750px login_card1 z-10"
      :style="{
        top: 'calc(50% - 430px)',
        left: 'calc(50% - 720px)',
        padding: '20px',
      }"
    >
      <SiginDeveloperView />
    </a-card>
  </a-card>
</template>

<style lang="less" scoped>
.login_contain {
  box-sizing: border-box;
  position: relative;
  overflow-y: auto;
  .box_title {
    position: relative;
    z-index: 222 !important;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px;
    // background-color: #31bc63;
    background-image: url("../../assets/images/signin_bg_top.png");
    background-repeat: no-repeat;
    opacity: 0.6;
    background-size: 100% 100%;
    z-index: 1;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background-color: #31bc63;
  }
}
.login_card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // overflow: hidden;
  position: relative;
  z-index: 4 !important;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-image: url("../../assets/images/login_top.png");
    background-repeat: no-repeat;
    background-size: 100%;
  }
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: url("../../assets/images/login_buttom.png");
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
.login_card1 {
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // overflow: hidden;
  position: relative;
}
</style>
